import {
  createSeatAPI,
  DataType,
  deleteSeatAPI,
  getSeatListAPI,
  updateStatusAPI,
} from '@/service/seat';
import { Button, Form, Input, Modal, Table } from 'antd';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import LineChart from './BarChart';
import FormItem from 'antd/lib/form/FormItem';

const App: React.FC = () => {
  const [data, setData] = useState<DataType[]>();
  const [loading, setLoading] = useState(false);

  //发送查询请求
  const fetchData = useCallback(async () => {
    const id = localStorage.getItem('restaurant');
    const res = await getSeatListAPI(id);
    setData(res);
    console.log(data);
  }, []);

  useEffect(() => {
    fetchData();
  }, []);

  const columns: ColumnsType<DataType> = useMemo(
    () => [
      {
        title: '座位名称',
        dataIndex: 'seatName',
        key: 'seatName',
        width: '15%',
      },
      {
        title: '大小',
        dataIndex: 'seatSize',
        key: 'seatSize',
        width: '15%',
      },
      {
        title: '状态',
        dataIndex: 'seatStatus',
        key: 'seatStatus',
        width: '15%',
        render: (seatStatus) => {
          return seatStatus === 0 ? '停用' : '正常';
        },
      },
      {
        title: '操作',
        width: '15%',
        render: (_, record) => (
          <>
            <Button
              onClick={() => {
                updateStatus(record.id);
              }}
            >
              {record.seatStatus === 0 ? '恢复' : '停用'}
            </Button>

            <Button
              onClick={() => {
                deleteSeat(record.id);
              }}
            >
              删除
            </Button>
          </>
        ),
      },
      // {
      //   title: '预约情况',
      //   width: '40%',
      //   render: (_, record) => (
      //     <>
      //       <LineChart seatId={record.id}></LineChart>
      //     </>
      //   ),
      // },
    ],
    [],
  );
  const updateStatus = async (id: number) => {
    await updateStatusAPI(id);
    fetchData();
  };
  const update = async (record: DataType) => {
    await createSeatAPI(record);
    fetchData();
  };
  const deleteSeat = async (id: number) => {
    Modal.confirm({
      title: '删除',
      content: '确认删除吗？',
      onOk() {
        deleteSeatAPI(id);
        fetchData();
      },
    });
  };
  const onFinish = async (values: DataType) => {
    const id = localStorage.getItem('restaurant');
    const seat = {
      seatName: values.seatName,
      seatSize: values.seatSize,
      restaurantId: parseInt(id!),
    };
    await createSeatAPI(seat);

    fetchData();
  };
  const [form] = Form.useForm();

  const addSeat = () => {
    Modal.confirm({
      title: '新增座位',
      //from表单
      content: (
        <Form form={form} name="basic" onFinish={onFinish}>
          <FormItem
            label="座位名称"
            name="seatName"
            rules={[{ required: true, message: '请输入座位名称' }]}
          >
            <Input />
          </FormItem>
          <FormItem
            label="座位大小"
            name="seatSize"
            rules={[{ required: true, message: '请输入座位大小' }]}
          >
            <Input />
          </FormItem>
        </Form>
      ),
      onOk: () => {
        form.submit();
      },
    });
  };

  return (
    <div>
      <Button onClick={addSeat}>新增座位</Button>
      <Table
        rowKey={(record) => record.id}
        dataSource={data}
        columns={columns}
        loading={loading}
      />
      <LineChart></LineChart>
    </div>
  );
};

export default App;
